<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
	<title>设置事务类型</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="<%=basePath%>assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath%>assets/css/bui-min.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath%>assets/css/page-min.css" rel="stylesheet" type="text/css" />
	
	<!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
	<link href="<%=basePath%>assets/css/prettify.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="<%=basePath%>assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>assets/js/bui-min.js"></script>
	<script type="text/javascript" src="<%=basePath%>assets/js/config-min.js"></script>
	<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
	<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
	<script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
	<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
	<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
	<style type="text/css">
		body {
			text-align: center;
			padding: 20px 50px 20px 30px;
		}
		
		.doc-content {
			width: 100%;
		}
		
		.form-panel {
			width: 100%;
		}
		
		.panel-content, .table th {
			background: #DFF0D8;
		}
		
		.panel-content>li>button, .panel-content>li>a {
			font-size: 12px;
			letter-spacing: 2px;
			margin-left: 20px;
		}
		
		.table {
			width: 50%;
			margin-left: 25%;
		}
		
		.table td, .table th {
			text-align: center;
		}
		
		.table a {
			color: #222;
			margin: 0 10px;
		}
	</style>
</head>

<body>
	<div class="span24 doc-content">
		<!-- 增加事务类型的表单 -->
		<form action="<%=basePath%>transtype/addTransType" method="post" 
			class="form-panel" id="J_Form">
			<ul class="panel-content">
				<li>
					<label class="control-label">事务种类：</label>

					<div style="display: inline-block;">
						<input name="ttname" style="width:180px;" placeholder="填写要增加的事务种类名称..." 
							type="text" data-rules="{required:true}">
						<s:fielderror></s:fielderror>
					</div>

					<button class="button button-success">添加</button> 
					
					<!-- 返回上一个页面的按钮 -->
					<a href="<%= basePath %>transdetail/listTransDetail" class="button button-default">返回</a>
				</li>
			</ul>
		</form>

		<!-- 显示事务类型数据的表格 -->
		<table class="table table-bordered">

			<!-- 表头 -->
			<thead>
				<tr>
					<th>事务种类</th>
					<th>操作</th>
				</tr>
			</thead>

			<!-- 迭代输出数据 -->
			<tbody>
				<s:iterator value="#pageInfo.basePageList" var="transType">
					<tr>
						<td><s:property value="#transType.ttname"/></td>
						<td>
							<a href="<%=basePath%>transtype/deleteTransType?ttypeid=<s:property value="#transType.ttypeid"/>" 
								class="delete button" style="border: 0px;"> 
								<i class="icon-black icon-trash"></i>
							</a>
						</td>
					</tr>
				</s:iterator>
			</tbody>
		</table>
		<div>
			<div class="pagination pull-right" style="margin: 30px 340px 0 0;">
				<ul>
					<!-- 显示总记录数和总页数 -->
					<li class="disabled" style="letter-spacing: 2px;">
						<a href="">
							总共<s:property value="#pageInfo.rootListSize" />条/
							<s:property value="#pageInfo.pageCount" />页
						</a>
					</li>

					<!-- 是否要上一页按钮 -->
					<s:if test="#pageInfo.nowPage > 1">
						<li class="active">
							<a href="<%=basePath%>transtype/listTransType?targetPage=<s:property value="#pageInfo.nowPage - 1"/>">
								«上一页
							</a>
						</li>
					</s:if>
					<s:else>
						<li class="disable">
							<a href="">« 上一页</a>
						</li>
					</s:else>

					<!-- 迭代输出每一页的页号 -->
					<s:iterator value="#pageInfo.pageNoList" var="page">
						<!-- 首先确保不是-1 -->
						<s:if test="#page != -1">
							<s:if test="#page != 0">
								<!-- 如果是当前页，特殊颜色显示 -->
								<s:if test="#page == #pageInfo.nowPage">
									<li class="active">
										<a href="<%=basePath%>transtype/listTransType?targetPage=<s:property value="#page"/>">
											<s:property value="#page" />
										</a>
									</li>
								</s:if>

								<!-- 否则一般颜色显示 -->
								<s:else>
									<li>
										<a href="<%=basePath%>transtype/listTransType?targetPage=<s:property value="#page"/>">
											<s:property value="#page" />
										</a>
									</li>
								</s:else>
							</s:if>
							<s:else>
								<li>
									<a href="<%=basePath%>transtype/listTransType?targetPage=1">...</a>
								</li>
							</s:else>
						</s:if>
					</s:iterator>

					<!-- 是否需要最后一页的按钮 -->
					<s:if test="#pageInfo.pageCount == #pageInfo.nowPage">
						<li class="disable">
							<a href="">下一页 »</a>
						</li>
					</s:if>
					<s:else>
						<li class="active">
							<a href="<%=basePath%>transtype/listTransType?targetPage=<s:property value="#pageInfo.nowPage + 1"/>">
							下一页»
							</a>
						</li>
					</s:else>
				</ul>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		BUI.use('bui/form', function(Form) {
			new Form.Form({
				srcNode : '#J_Form'
			}).render();
		});
	</script>
	<script type="text/javascript">
		var href = "";
		BUI.use('bui/overlay', function(Overlay) {
			var dialog = new Overlay.Dialog({
				title : '确认框 ',
				width : 300,
				height : 200,
				bodyContent : '<p>是否确认删除  ？ </p>',
				success : function() {
					window.location.href = href;
				}
			});

			$('.delete').on('click', function(e) {
				e.preventDefault();
				href = this.href;
				dialog.show();
			});
		});
	</script>

</body>
</html>
